<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        新增培训
      </p>
      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 新增培训 --start-->
    <div id="table_box10">
      <el-table :data="tableData" :max-height="500" border style="width: 98%;margin:0 auto">
        <el-table-column label width="180" prop="xuhao"></el-table-column>
        <el-table-column label="培训主题" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.theme"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="培训时间">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.time"
              style="width:100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="参与人数">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="培训对象">
          <template slot-scope="scope">
            <el-input v-model="scope.row.objs"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="培训内容">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="scope.row.main"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              v-show="scope.$index == 0"
              @click="shangchu(scope)"
            >新增</el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              v-show="scope.$index !== 0"
              @click="shangchu(scope)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <table>
        <tbody>
          <tr style="height:50px;line-height:50px;">
            <td></td>
            <td>培训主题</td>
            <td>培训时间</td>
            <td>参与人数</td>
            <td>培训对象</td>
            <td>培训内容</td>
          </tr>
          <tr>
            <td>培训计划一</td>
            <td>
              <el-input v-model="theme"></el-input>
            </td>
            <td>
              <el-date-picker
                v-model="value1"
                style="width:100%"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
              ></el-date-picker>
            </td>
            <td>
              <el-input v-model="number"></el-input>
            </td>
            <td>
              <el-input v-model="number"></el-input>
            </td>
            <td>
              <el-input type="textarea" v-model="content"></el-input>
            </td>
          </tr>
        </tbody>
      </table>-->
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="addtrain()">确认</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      tableData: [{ xuhao: "培训计划1", theme: "", time: "", num: "", objs: "", main: "", creater: 0 }],
      creater: 0,
      Mark: 0,
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
  },
  methods: {
    // 动态删除
    shangchu (i) {
      if (i.$index == 0) {
        var ind = this.tableData.length + 1;
        var lists = { xuhao: "培训计划" + ind, theme: "", time: "", num: "", objs: "", main: "", creater: 0 };
        this.tableData.push(lists);      }
      else {
        this.tableData.splice(i.$index, 1);
        if (this.tableData.length > 1) {
          for (var i = 1; i < this.tableData.length; i++) { this.tableData[i].xuhao = "培训计划" + (i + 1); }
        }
      }
    },
    //返回
    revert () {
      this.$router.go(-1);
    },
    //新增培训
    addtrain () {
      if (this.Mark == 0) {
        let N_Mark = 0;
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].creater = this.creater;
          if (this.tableData[i].theme == "") { N_Mark = 1; break; }
          if (this.tableData[i].time == "") { N_Mark = 2; break; }
          if (this.tableData[i].num == "") { N_Mark = 3; break; }
          if (this.tableData[i].objs == "") { N_Mark = 4; break; }
          if (this.tableData[i].main == "") { N_Mark = 5; break; }
        }
        if(N_Mark==1){this.$message.error("培训主题非空");return;}
        if(N_Mark==2){this.$message.error("培训时间非空");return;}
        if(N_Mark==3){this.$message.error("参与人数非空");return;}
        if(N_Mark==4){this.$message.error("培训对象非空");return;}
        if(N_Mark==5){this.$message.error("培训内容非空");return;}      
        var objs = JSON.stringify(this.tableData); let the = { index: 3, jsondata: objs };
        console.log(objs)
        this.Mark = 1;
        axios.post("/apis/PersonnelMatters.asmx/Add", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);          }
          else { this.$message.error(list.tip); }
        });
      }
    },
    //培训详情数据
    traindetail () {
      let arr = {
        trainno: this.trainno
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/Tranmanagelst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.theme = data3.theme;
        this.amount = data3.number;
        this.target = data3.trainobj;
        this.content = data3.content;
        this.type = data3.trantype;
        this.plan = data3.plantype;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.trainon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          data3.trainon = y + "-" + m + "-" + d + " ";
          this.date = data3.trainon;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.distribute {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      height: 50px;
      line-height: 50px;
      text-align: left;
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_box10 {
  height: 570px;
  width: 98%;
  margin: 0 auto;
  background: $white;
  color: #909399;
  padding-top: 30px;
  table tr th {
    text-align: center;
    border: 1px solid #ebeef5;
  }
  table tr td {
    text-align: center;
    font-size: 14px;
    border: 1px solid #ebeef5;
  }
}
table {
  width: 98%;
  margin: 0 auto;
}
.bottom {
  text-align: center;
  margin-top: 10px;
}
</style>
<style>
#table_box10 .el-input__inner {
  border: none;
  outline: none;
}
#table_box10 .el-textarea__inner {
  border: none;
  outline: none;
  padding: 20px 1%;
}
#table_box10 .el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>